<script setup>
import { ref } from 'vue'
import { useCommonStore, useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { avatarColor } from '@/assets/data.js'
import { useTheme } from '@/hooks/useTheme.js'

const emit = defineEmits(['refresh'])

const userStore = useUserStore()
const commonStore = useCommonStore()
const { currentWall, walls } = storeToRefs(commonStore)
const { user } = storeToRefs(userStore)
// 主题切换
const { theme, toggleTheme } = useTheme()

// 游客登录
const loading = ref(false)
const dropdownRef = ref()
const onLogin = async () => {
  loading.value = true
  try {
    await userStore.loginTourist()
    // 关闭下拉菜单并刷新数据
    dropdownRef.value.toggleDropdown()
    emit('refresh')
  } finally {
    loading.value = false
  }
}

// 退出登录
const logout = () => {
  userStore.logout()
  dropdownRef.value.toggleDropdown()
  emit('refresh')
}
</script>

<template>
  <div class="zy-header">
    <!-- 左侧logo -->
    <div class="logo">
      <img src="@/assets/images/logo.svg" alt="logo" />
      <p>知语拾光</p>
    </div>
    <!-- 中间 -->
    <div class="menu">
      <zy-button
        class="menu-button"
        :class="{ active: currentWall.id === item.id }"
        v-for="item in walls"
        :key="item.id"
        :is-debounce="false"
        @click="commonStore.changeWall(item.id)"
        >{{ item.title }}</zy-button
      >
    </div>
    <!-- 右侧 -->
    <div class="header-right">
      <svg-icon
        class="theme"
        :icon-name="theme === 'light' ? 'moon' : 'sun'"
        @click="toggleTheme"
      />
      <zy-dropdown ref="dropdownRef">
        <a
          class="avatar-content"
          href="javascript:void(0);"
          :title="user.nickname || user.username || '未登录'"
        >
          <!-- 未登录 -->
          <svg-icon class="avatar" v-if="!user.id" icon-name="def_avatar" />
          <!-- 已登录 -->
          <template v-else>
            <!-- 判断头像是否有效 -->
            <img class="avatar" :src="user.avatar" v-if="user.avatar?.startsWith('http')" />
            <div class="avatar" v-else :style="{ backgroundImage: avatarColor[user.avatar] }"></div>
          </template>
        </a>
        <template #menu>
          <!-- 已登录 -->
          <template v-if="userStore.user.id">
            <zy-button class="menu-item" @click="$router.push('/account')">账号信息</zy-button>
            <zy-button class="menu-item" @click="logout">退出登录</zy-button>
          </template>
          <!-- 未登录 -->
          <template v-else>
            <zy-button class="menu-item" @click="$router.push('/login')">用户登录</zy-button>
            <zy-button class="menu-item" :loading="loading" @click="onLogin">游客登录</zy-button>
          </template>
          <zy-button class="menu-item" @click="$router.push('/register')">用户注册</zy-button>
        </template>
      </zy-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zy-header {
  width: 100%;
  height: 52px;
  padding: 0 30px;
  background-color: var(--header-bg);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--tr);
}
.logo {
  display: flex;
  align-items: center;
  P {
    color: var(--primary-text);
    font-size: 20px;
    font-weight: 600;
    margin-left: 8px;
  }
}
.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-content: center;
  .menu-button {
    min-width: 80px;
    height: 36px;
    margin: 0 5px;
    border-radius: 18px;
    color: var(--primary-text);
  }
  .active {
    background-color: var(--primary-color);
    font-weight: 600;
    color: #fff;
  }
}
.header-right {
  display: flex;
  align-items: center;

  .theme {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    cursor: pointer;
  }
  .avatar-content {
    display: flex;
  }
  .avatar {
    border-radius: 50%;
    width: 36px;
    height: 36px;
  }
  .menu-item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    font-size: 14px;
    color: #5b5b5b;
    cursor: pointer;
    &:hover {
      color: #1890ff;
      background-color: #ecf5ff;
    }
  }
}
</style>
